<template>
    <div :class="['container', { 'checked-background': data.checked }]">
        <div class="left">
            <img v-if="data.facePic"  class="profile-picture" :src="data.facePic" alt="" :style="{ border: '2px solid ' + data.color }" />
            <img v-else  class="profile-picture" :src="require('@/views/witness/components/Object3D/canvas/默认头像.png')" :style="{ border: '2px solid ' + data.color }" alt="" />
        </div>
        <div class="center">
            <p class="name">{{ data.personName }}</p>
            <p class="description">{{ data.cardId }}</p>
            <p class="info">{{ peopList[data.personType] }}</p>
        </div>
        <div class="right">
            <el-checkbox @change="selectChange(data)" v-model="data.checked"></el-checkbox>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        selectChange:{
            type:Function,
            default:(x)=>x
        },
        data:{
            type:Object,
            default:()=>{
                return {
                    personSex:'男',
                    personType:'ZJ',
                    personName:'张伟',
                    idNo:"130725198811011215",
                    personId:"297e9bef921cb7ac01921cb883320000",
                    facePic:'',
                    cardId:"403270",
                    colro:'',
                    checked:false
                }
            }
        },
    },
    data() {
        return {
            peopList:{
                'ZJ': "评标专家",
                'JD': "甲方代表",
                'ZBDL': "招标代理",
                'GZRY': "工作人员"
         }
        };
    },
    methods:{
     
    },
    created() {
        // console.log(this.bordercolor,');
        
    }
};
</script>

<style scoped>
.container {
    display: flex;
    align-items: center;
    color: white;
    background-color: #334E6C;
    min-height: 100px;
}

.container.checked-background {
    background-color: #2E5A8B;
    /* 你想要的颜色 */
}

.left {
    flex: 1;
    text-align: center;
}

.profile-picture {
    width: 100px;
    /* 根据需要调整图片大小 */
    height: auto;
    box-sizing: border-box;

}

.center {
    flex: 2;
    padding: 0 20px;
}
.center p{
    margin-bottom: 10px;
}

.right {
    flex: 1;
    text-align: center;
}
</style>